<template>
  <div class="container index ">
    <swiper :autoplay="{ delay: 5000, disableOnInteraction: true }" :modules="modules" :loop="true">
      <swiper-slide v-for="(item, index) in data.topSlide" :key="String(index)">
        <div class="headBox">
          <video class="video" :poster="item.pic_url" :src="item.video_url" autoplay muted playsinline="1" webkit-playsinline="1" v-if="item.video_url"></video>
          <div class="bg" :style="{ backgroundImage: `url(${item.pic_url})` }" v-else></div>
          <div class="body flex-y flex-y-center flex-x-center">
            <div class="col-f  txt1 animate__animated animate__fadeInUp">{{ item.title }}</div>
            <div class="txt2  col-f animate__animated animate__fadeInUp">{{ item.brief }}</div>
            <div class="bottomLine mb-60 animate__animated animate__zoomIn"></div>
            <div class="button-container animate__animated animate__zoomIn">
              <button class="glow-button" style="--btn-color: #ffffff;" @click="scrollToNext">
                了解更多>>

              </button>
            </div>

          </div>
        </div>
      </swiper-slide>
    </swiper>
    <div class="bodyBox" v-slide>
      <div class="contain wrapBox">
        <h3 class="title fnt_30">智慧社区</h3>

        <div class="info-container">
          <el-row :gutter="24" class="animate__animated animate__fadeInUp fadeInUp20" v-for="item in newIconList">
            <el-col :span="4" :xs="8" v-for="itemf in item">
              <div class="infoItem flex-y flex-y-center fnt_20">
                <div class="imgBox flex-center">
                  <img class="img" :src="itemf.pic_url" />
                </div>
                <div class="txt1 col-3 t-c ">{{itemf.title}}</div>
              </div>
            </el-col>

          </el-row>

        </div>
      </div>
    </div>

    <div class="swiperBox" v-slide>
      <swiper :loop="true" @swiper="bindSwiper">
        <swiper-slide v-for="(item, index) in data.qualityList" :key="String(index)">
          <NuxtLink :to="{path: `/article/${item.article_id}`}">
            <div class="bg1" :style="{ backgroundImage: `url(${item.image_url})` }">
              <h3 class="fnt_40 mb-30 col-f one-line-hide">{{ item.title }}</h3>
              <p class="fnt_20 col-f mb-20 line24 three-line-hide">{{ item.brief }}</p>
            </div>
          </NuxtLink>
        </swiper-slide>
      </swiper>
      <div class="optionsBox">
        <div class="info-head">
          <ul class="info-wrapper dis-flex flex-x-center flex-y-center">
            <li class="info-slide w-s one-line-hide" v-for="item, index in data.qualityList" @mouseover="infoItemMouseOverHandle(index)" :class="{ active: mySwiper.realIndex === index }">{{ item.title
              }}
            </li>
          </ul>
        </div>
      </div>

      <div class="slideBox flex-row" v-if="data.qualityList.length > 1">
        <div class="optionItem dis-flex flex-x-center flex-y-center mr-10" @click="slidePrev">
          <el-icon>
            <ElIconBack />
          </el-icon>
        </div>
        <div class="optionItem dis-flex flex-x-center flex-y-center" @click="slideNext">
          <el-icon>
            <ElIconRight />
          </el-icon>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="js">
import "swiper/css";
import 'swiper/css/pagination'
import { Autoplay} from 'swiper/modules';
 const modules = [Autoplay];
import serverRequest from '~/composables/useServerRequest';
import { getDimensionaArr } from "@/utils/tool";

const data = await serverRequest.get('quality/index');
/**
 * 头部设置
 */
 const keywords = computed(() => {
  const topSlide = data.topSlide
  const newKeywords =  data.topSlide.map(item => item.title).join(',')
  return newKeywords
});

const description = computed(() => {
  const topSlide = data.topSlide
  const newDescription =  data.topSlide.map(item => item.brief).join(',')
  return newDescription
});
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk}-品质` : '红河大成房地产';
  },
  meta: [
    { name: 'keyword', content: keywords },
    { name: 'description', content:description }
  ]
})
const newIconList = computed(() => {
  const iconList = data.iconList
  return getDimensionaArr(iconList,6);
});

const pageData = reactive({
  navigation: [
    {
      name: "区位",
      value: "/location",
      id: 1,
    },
    {
      name: "景观",
      value: "/landscape",
      id: 2,
    },
    {
      name: "品质",
      value: "/intellectualProperty/index",
      id: 3,
    },
    {
      name: "服务",
      value: "/article/index",
      id: 4,
    },
    {
      name: "服务",
      value: "/article/index",
      id: 4,
    },
    {
      name: "服务",
      value: "/article/index",
      id: 4,
    }


  ]
});
const { navigation } = toRefs(pageData);

let mySwiper = ref([])    // 记得引入reactive
const bindSwiper = (swiper) => {
  mySwiper.value = swiper
}
function infoItemMouseOverHandle(index) {
  pageData.currentIndex = index;
  mySwiper.value.slideTo(index, 500, false)
}
function slidePrev(e) {
  mySwiper.value.slidePrev()
}
function slideNext(e) {
  mySwiper.value.slideNext()
}
// 滚动区域的引用
function scrollToNext(){
  window.scrollTo({ top: window.innerHeight - 90, behavior: 'smooth' });
}
</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>
